<template>
  <div id="wo">
        <header class="head">
            <div class="head_text" @click="">
                我         
            </div>
        </header>
        <section class="mine-sec fixed-bottom">
            <div class="mine-sec-header">
                <div class="sec-header-pic">
                    <img class="globalImg" src="../../assets/images/pic01.png">
                </div>
                <div class="split20"></div>
                <div class="sec-header-name">{{msg}}</div>
            </div>
            <section class="sec-cont">
                <mu-list>
                    <mu-list-item title="个人信息" @click="gotomyUserinfo">
                        <mu-avatar icon="person" slot="leftAvatar"/>
                        <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                    </mu-list-item>
                    <mu-divider/>
                    <mu-list-item title="手机绑定" @click="gotoMobileBind">
                        <mu-avatar icon="phone" slot="leftAvatar"/>
                        <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                    </mu-list-item>
                    <mu-divider/>
                    <mu-list-item title="订单管理" @click="gotomyOrder">
                        <mu-avatar icon="folder" slot="leftAvatar"/>
                        <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                    </mu-list-item>
                    <mu-divider/>
                    <mu-list-item title="关于我们" @click="gotomyAbout">
                        <mu-avatar icon="cloud" slot="leftAvatar"/>
                        <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                    </mu-list-item>
                    <mu-divider/>
                    <mu-list-item title="信箱" @click="gotoEmail">
                        <mu-avatar icon="mail" slot="leftAvatar"/>
                        <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                    </mu-list-item>
                </mu-list>
            </section>
        </section>
        <!-- <mu-dialog :open="dialog" title="绑定手机" @close="close">
            <mu-text-field v-model='phone' hintText="电话号码" type="number" icon="phone"/>
            <mu-flat-button slot="actions" @click="close" primary label="取消"/>
            <mu-flat-button slot="actions" primary @click="sendPhone" label="获取验证码"/>
        </mu-dialog> -->
  </div>
</template>

<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
    export default {
        name: 'wo', //组件的名字
        data() {
            return { //数据
                msg: '小花猫的世界',
                dialog:false,
                phone:'',
            }
        },
        methods: { //方法
            ...mapActions(['getPhone']),
            gotomyOrder() {
                this.$router.push({
                    path: '/myOrder'
                })
            },
            gotomyAbout(){
                this.$router.push({
                    path: '/ydabout'
                })
            },
            gotomyUserinfo(){
                this.$router.push({
                    path: '/yduserinfo'
                })
            },
            gotoEmail(){
                this.$router.push({
                    path: '/email'
                })
            },
            // open () {
            //   this.dialog = true
            // },
            gotoMobileBind(){
                this.$router.push({
                    path: '/mobileBind'
                })
            },
            sendPhone(){
                let mobile = {
                    recNum : this.phone
                }
                //let m = JSON.stringiry(mobile);
                this.dialog = false;
                this.getPhone(mobile);
            },
            close () {
              this.dialog = false
            }
        },
        computed: { //计算 用来引入vuex里面state

        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        },
        components: { //加载子组件

        }
    }
</script>
<style scoped lang="scss">
    .mine-sec-header {
        /*height:120px;*/
        background: #000;
        /*url(../../assets/images/pic01.png) no-repeat center;*/
        background-size: 100%;
        padding: 20px 0;
        /*display: flex;    */
        justify-content: center;
        /*定义项目在主轴的对齐方向*/
        align-items: center;
        /*定义项目在交叉轴的对齐方向*/
        .sec-header-pic {
            /*flex: 8;*/
            position: relative;
            text-align: center;
            img {
                border: 4px solid #eee;
            }
        }
        .sec-header-name {
            /*flex: 7;*/
            position: relative;
            text-align: center;
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->